<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    xmlns:c="http://java.sun.com/jstl/core"
    template="/layout/template.xhtml">

    <ui:define name="currency">
		<ui:include src="/layout/currency.xhtml" >
			<ui:param name="viewManager" value="#{kItemViewManager}" />
			<ui:param name="reRenderIds" value="price_data" />
		</ui:include>
    </ui:define>
    
    <ui:define name="l_content">
		<ui:include src="/l_content/lc.xhtml" />
    </ui:define>
    
    <ui:define name="body">
    	<h:panelGroup id="ipnl" rendered="#{!kItemViewManager.error}">
			<h:form id="form_id">
			<a:commandButton onclick="window.location.href='#{facesContext.externalContext.requestContextPath}/k_shirt_library.k'"
				value="#{messages.k_shirt_library_msg}" >
			</a:commandButton>
			<h:panelGroup style="padding-left: 150px;">
				<h:outputText value=" - #{kItemViewManager.item.discount.percent}%" 
					title="#{kItemViewManager.item.discount.getName(kUser.klang)}" 
					rendered="#{kItemViewManager.item.discounted}" styleClass="item_price" />
					&#160;
				<h:outputText value="(-#{kItemViewManager.userDiscount}%)" 
					title="#{messages.your_discount_msg}"
					styleClass="red" rendered="#{kItemViewManager.userDiscounted}"/>
			</h:panelGroup>
			<br />
	    	<table cellpadding="10">
	    		<tr>
	    			<td valign="top" width="18px" style="padding-bottom: 25px;">
		    			<c:if test="#{kItemViewManager.next}">
		    				<a href="#{facesContext.externalContext.requestContextPath}/k_item.k?itemId=#{kItemViewManager.nextId}" >
		   						<h:graphicImage value="/index_htm_files/71.png" title="#{messages.prev_msg}"
		   							onmouseover="bgimg('prev_item','/kadron/index_htm_files/74.png','')"
									onmouseout="bgimg('prev_item','/kadron/index_htm_files/71.png','')" 
									styleClass="prev_item"/>
							</a>
		    			</c:if>
	    			</td>
	    			<td valign="top" >
                		<div class="k-shirt-main" >					    							
	              			<s:fragment rendered="#{not empty kItemViewManager.item.img.name}">
		                		<img src="/#{kInitParam.imgPath}/i_#{kItemViewManager.item.img.itemId}/#{kItemViewManager.item.img.thumb}" width="298px" height="397px" 
		                			style="position: relative;top: 9px;left: 24px;" id="mainIMG" />
	  						</s:fragment>
							<s:fragment rendered="#{empty kItemViewManager.item.img.name}" >
	  							<h:graphicImage value="/index_htm_files/85.png"  
	   									width="298px" height="397px" title="#{messages.no_image_available_msg}" 
	   									style="position: relative;top: 9px;left: 24px;"/>
	  						</s:fragment>
	    					<br />
	    					<img style="position: relative;left: 24px; top: 14px; width: 298px; height: 3px;" title="" alt="" src="index_htm_files/86.png" />
    						<div style="position: relative;top: 25px;left: 30px;width: 150px;height: 20px;background: #B3000B;" class="fs14">
			    				#{kItemViewManager.item.item.getName(kUser.klang)}
							</div>
   						</div>
	    			</td>
    				<c:if test="#{kItemViewManager.images.size > 0}" >
	    			<td valign="top">
				    	<table cellpadding="0" cellspacing="0" >
	    					<c:forEach items="#{kItemViewManager.images}" var="e" >
					    		<tr>
					    			<td>
					    				<div class="itv">
						    				<img src="/#{kInitParam.imgPath}/i_#{e.itemId}/#{e.thumb}" onclick="showIMG('/#{kInitParam.imgPath}/i_#{e.itemId}/#{e.name}')" />
					    				</div>
					    			</td>
					    		</tr>
					    		<tr>
					    			<td height="10"></td>
					    		</tr>
	    					</c:forEach>
		    			</table>
	    			</td>
    				</c:if>
	    			<td valign="top" width="18px" style="padding-bottom: 25px;">
		    			<c:if test="#{kItemViewManager.prev}">
		    				<a href="#{facesContext.externalContext.requestContextPath}/k_item.k?itemId=#{kItemViewManager.prevId}" >
		   						<h:graphicImage value="/index_htm_files/70.png" title="#{messages.next_msg}"
									onmouseover="bgimg('next_item','/kadron/index_htm_files/73.png','')"
									onmouseout="bgimg('next_item','/kadron/index_htm_files/70.png','')" 
									styleClass="next_item"/>
		    				</a>
	    				</c:if>
	    			</td>
	    			<td valign="top" >
	    				<a:outputPanel id="props">
	    					<h:panelGroup id="colors_" rendered="#{kItemViewManager.colorAvb}" styleClass="no_border">
	    						<table>
						    		<tr>
						    			<td width="80px" class="b">
							    			<h:outputText value="#{messages.color_msg}" />&#160;
							    		</td>
						    			<td>
				    						<rich:dataGrid value="#{kItemViewManager.colors}" var="e" columns="3">
				    							<h:panelGroup
							    					styleClass="#{kItemViewManager.isColorSelected(e) ? 'selected-pick' : 'pick'}"
								    				style="background: #{e.color.color.code}" title="#{e.color.color.getName(kUser.klang)}"
				    								layout="block">
								    				<a:commandLink action="#{kItemViewManager.selectColor(e)}" immediate="true" 
								    					reRender="colors_" title="#{e.color.color.getName(kUser.klang)}">
										    			<h:graphicImage value="/img/space.png" />
					    							</a:commandLink>
				    							</h:panelGroup>
				    						</rich:dataGrid>
						    			</td>
						    		</tr>
						    	</table>
	    					</h:panelGroup>
					    	<h:panelGroup id="sizes_" rendered="#{kItemViewManager.sizeAvb}" styleClass="no_border">
					    		<table>
						    		<tr>
						    			<td width="80px" class="b">
							    			<h:outputText value="#{messages.size_msg}" />&#160;
							    		</td>
						    			<td class="b">
								    		<rich:dataGrid value="#{kItemViewManager.sizes}" var="e" columns="3">
				    							<h:panelGroup
							    					styleClass="#{kItemViewManager.isSizeSelected(e) ? 'selected-pick' : 'pick'} size_qv"
								    				title="#{e.size.size.code}"
				    								layout="block">
								    				<a:commandLink action="#{kItemViewManager.selectSize(e)}" immediate="true" 
								    					reRender="sizes_" value="#{e.size.size.code}" >
										    			<h:graphicImage value="/img/space.png" />
					    							</a:commandLink>
				    							</h:panelGroup>
				    						</rich:dataGrid>
						    			</td>
						    		</tr>
						    	</table>
					    	</h:panelGroup>
					    	<h:panelGroup rendered="#{kItemViewManager.materialAvb}" >
						    	<table>
						    		<tr>
						    			<td width="80px" class="b">
							    			<h:outputText value="#{messages.material_msg}" />&#160;
							    		</td>
						    			<td>
						    				<s:fragment rendered="#{kItemViewManager.materials.size gt 0}">
								    			<h:selectOneMenu value="#{kItemViewManager.itemBasket.itemMaterial}" required="true">
						    						<s:selectItems value="#{kItemViewManager.materials}" var="p" label="#{p.material.material.getName(kUser.klang)}" />
						    						<s:convertEntity />
						    					</h:selectOneMenu>
						    				</s:fragment>
						    			</td>
						    		</tr>
						    	</table>
					    	</h:panelGroup>
					    	<table>
		    					<tr>
		    						<td class="b" width="80px" >
		    							<h:outputText value="#{messages.quantity_msg}" />
		    						</td>
		    						<td>
		    							<a:outputPanel>
			    							<h:inputText id="q_id" value="#{kItemViewManager.itemBasket.quantity}" required="true" size="2" styleClass="tar">
			    								<f:validator validatorId="kPositiveValidator"/>
			    							</h:inputText>
			    							<!-- 
			    							<rich:message for="q_id" >
			    								<f:facet name="errorMarker">
											    	<h:graphicImage url="/img/bad.png"/>
											    </f:facet>
			    							</rich:message>
			    							 -->
		    							</a:outputPanel>
		    						</td>
		    					</tr>
		    				</table>
		    				<h:panelGroup id="price_data">
		    				<table>
		    					<tr>
		    						<td colspan="2">
		    							<s:fragment rendered="#{kItemViewManager.delPrice}">
		    								<del>
				    							<h:outputText value="#{kItemViewManager.item.price} #{kUser.currency.sign}" 
				    								title="#{messages.price_msg}"
				    								styleClass="del_item_price" />
		    								</del>&#160;
		    							</s:fragment>
		    							<s:fragment rendered="#{!kItemViewManager.delPrice}">
			    							<h:outputText value="#{kItemViewManager.item.price} #{kUser.currency.sign}" 
			    								title="#{messages.price_msg}"
			    								styleClass="item_price" />
		    							</s:fragment>
		    							<s:fragment rendered="#{kItemViewManager.item.discounted}">
			    							<s:fragment rendered="#{kItemViewManager.delDiscountPrice}">
			    								<del>
					    							<h:outputText value="#{kItemViewManager.item.discountPrice} #{kUser.currency.sign}" 
					    								title="#{messages.discount_price_msg}"
					    								styleClass="del_item_price" />
			    								</del>
			    							</s:fragment>
			    							<s:fragment rendered="#{!kItemViewManager.delDiscountPrice}">
				    							<h:outputText value="#{kItemViewManager.item.discountPrice} #{kUser.currency.sign}" 
				    								title="#{messages.discount_price_msg}"
				    								styleClass="item_price" />
			    							</s:fragment>
		    							</s:fragment>
		    							&#160;
		    							<h:outputText value="#{kItemViewManager.item.yourPrice} #{kUser.currency.sign}" 
		    								title="#{messages.your_price_msg}"
		    								rendered="#{kItemViewManager.userDiscounted}" styleClass="item_price" />
		    						</td>
		    					</tr>
		    					<tr>
		    						<td colspan="2" nowrap="nowrap">
		    							<h:outputText value="#{kItemViewManager.item.item.kadrons} K" styleClass="item_price" />
		    						</td>
		    					</tr>
		    				</table>
		    				</h:panelGroup>
		    				<br />
							<a:commandButton action="#{kItemViewManager.add()}" value="#{messages.add_to_basket_msg}" reRender="item_panel, messages" 
								rendered="#{kItemViewManager.price gt 0}" />
	    				</a:outputPanel>
						<br />
						<h:panelGroup id="fav_panel" styleClass="no_border">
							<hr width="100%" />
							<c:if test="#{identity.loggedIn}" >
								<a:commandLink action="#{kItemViewManager.doFavorites()}" reRender="messages, fav_panel" immediate="true">
									<h:graphicImage value="#{kItemViewManager.favorite ? '/img/zr.png' : '/img/zn.png'}" 
										title="#{kItemViewManager.favorite ? messages.remove_from_favorites_msg : messages.add_to_favorites_msg}" />
								</a:commandLink>
							</c:if>
							<br />
							<h:outputText value="#{messages.favorites_msg}:" styleClass="b" />
							<rich:dataTable id="favs_" value="#{kItemViewManager.favDataModel}" var="e" rows="5" 
								rendered="#{kItemViewManager.favDataModel.size gt 0}" style="width:250px !important;" >
								<rich:column width="250" styleClass="no_border">
									<table width="100%" >
										<tr>
											<td width="52">
												<h:panelGroup rendered="#{e.thumbAvb}">
													<a href="#{facesContext.externalContext.requestContextPath}/k_profile.k?userId=#{e.userId}" >
														<img src="/#{kInitParam.imgPath}/av_#{e.userId}/#{e.thumb}" width="50" height="50"/>
													</a>
												</h:panelGroup>
											</td>
											<td valign="top" style="padding-left: 10px;">
												<a href="#{facesContext.externalContext.requestContextPath}/k_profile.k?userId=#{e.userId}" >
													<h:outputText value="#{e.username}" styleClass="b"/>&#160;
												</a>
												<br />
												<h:outputText value="#{e.created}" styleClass="gray">
													<s:convertDateTime pattern="dd MMM yyyy HH:mm"/>
												</h:outputText>
											</td>
										</tr>
									</table>
								</rich:column>
							</rich:dataTable>
							<rich:datascroller for="favs_" renderIfSinglePage="false" />
						</h:panelGroup>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td></td>
	    			<td>
	    				<h:panelGroup id="comment_panel" style="padding-left: 40px;">
							<h:form id="comm_form_id_1">
								<h:panelGroup id="comm_panel" styleClass="no_border">
									<h:outputText value="#{messages.comments_msg}: " styleClass="b"/>&#160;
									<h:outputText value="#{kItemViewManager.commentList.size}" styleClass="red b"/>
									<rich:datascroller for="comments_" renderIfSinglePage="false" style="width:350px !important;"/>
									<rich:dataTable id="comments_" value="#{kItemViewManager.commentList}" var="e" rows="5" 
										rendered="#{kItemViewManager.commentList.size gt 0}" style="width:350px !important;" cellpadding="0" cellspacing="0">
										<rich:column width="250" >
											<table width="100%" >
												<tr>
													<td width="52">
														<h:panelGroup rendered="#{not empty e.thumb}">
															<img src="/#{kInitParam.imgPath}/av_#{e.userId}/#{e.thumb}" width="50" height="50"/>
														</h:panelGroup>
													</td>
													<td valign="top" style="padding-left: 10px;">
														<s:fragment rendered="#{e.userAvb}">
															<a href="#{facesContext.externalContext.requestContextPath}/k_profile.k?userId=#{e.userId}" >
																<h:outputText value="#{e.name}" styleClass="b"/>&#160;
															</a>
														</s:fragment>
														<s:fragment rendered="#{!e.userAvb}">
															<h:outputText value="#{e.name}" styleClass="b"/>&#160;
														</s:fragment>
														<h:outputText value="#{e.comment}" />
														<br />
														<h:outputText value="#{e.created}" styleClass="gray">
															<s:convertDateTime pattern="dd MMM yyyy HH:mm"/>
														</h:outputText>
													</td>
												</tr>
											</table>
										</rich:column>
									</rich:dataTable>
								</h:panelGroup>
							</h:form>
							<br />
							<hr width="100%" align="left"/>
							<h:form id="comm_form_id_2">
								<div id="add_comm">
									<div id="div2">
										<a onclick="toggleDIV('div1','div2')" href="#add_comm">
											<h:outputText value="#{messages.add_comment_msg}" />
										</a>
									</div>
									<div id="div1" style="display: none;">
										<a onclick="toggleDIV('div1','div2')" href="#add_comm">
											<h:outputText value="#{messages.hide_msg}" />
										</a>
										<table>
											<tr>
												<td class="b">
													<h:outputLabel value="#{messages.name_msg}" for="name_" /><span class="m">*</span>
												</td>
												<td>
													<h:inputText id="name_" value="#{kItemViewManager.name}" rendered="#{!identity.loggedIn}" required="true"/>
													<h:outputText id="user_name_" value="#{kUser.user.username}" rendered="#{identity.loggedIn}" />
												</td>
											</tr>
											<tr>
												<td class="b">
													<h:outputLabel value="#{messages.comment_msg}" for="comment_" /><span class="m">*</span>
												</td>
												<td>
													<h:inputTextarea id="comment_" value="#{kItemViewManager.comment}" required="true" cols="38" rows="4"/>
												</td>
											</tr>
											<tr>
												<td>
												</td>
												<td>
													<a:commandButton action="#{kItemViewManager.addComment()}" value="#{messages.send_msg}" 
														reRender="comment_panel, comments_, messages"/>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</h:form>
						</h:panelGroup>
	    			</td>
	    			<td></td>
	    		</tr>
			</table>
		</h:form>
		<br />
	</h:panelGroup>
	<s:fragment rendered="#{kItemViewManager.error}">
		<h:outputText value="#{messages.item_not_available_msg}" />&#160;&#160;
		<a href="#{facesContext.externalContext.requestContextPath}/k_shirt_library.k" >
			<h:outputText value="#{messages.back_to_k_shirt_library}" />
 		</a>
	</s:fragment>
	<script type="text/javascript">
		function showIMG(path) {
			var mainIMG = document.getElementById('mainIMG');
			mainIMG.src = path;
			return false;
		}
	</script>
    </ui:define>
    
</ui:composition>